<!DOCTYPE html>
<html>

<head>
    <title>MiniUI, treegrid</title>
    <!--jQuery js-->
    <script src="lib/jquery.min.js" type="text/javascript"></script>
    <!--MiniUI-->
    <link href="lib/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <script src="lib/miniui/miniui.js" type="text/javascript"></script>
</head>

<body>
    <h1>TreeGrid 树形表格</h1>

    <div>
        <div id="treegrid1" class="mini-treegrid" style="width:600px;height: 400px;;" showTreeIcon="false"
            treeColumn="taskname" idField="ForInside" expandOnLoad="true" onnodecheck="onNodeCheck"
            ondrawnode="onDrawNode">
            <div property="columns">
                <div name="taskname" field="ForInside" width="200">任务名称</div>
                <!-- <div field="Duration" width="100">工期</div>
                <div field="Start" width="100" dateFormat="yyyy-MM-dd">开始日期</div>
                <div field="Finish" width="100" dateFormat="yyyy-MM-dd">完成日期</div> -->
            </div>
        </div>
        <br>
        <button onclick="showTree1()">树1</button>
        <button onclick="showTree2()">树2</button>
        <button onclick="clear1()">清空</button>
    </div>

    <script>
        mini.parse();
        var treeData1 = [
            {
                "ForInside": "IO1输入输出",
                "children": [
                    {
                        "ForInside": "IO1-DI01",
                        "DataType": "InputOutput",
                        "Index": 1,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO1-DO01",
                        "children": [
                            {
                                "ForInside": "IO1-DI02",
                                "DataType": "InputOutput",
                                "Index": 2,
                                "ForOutside": null
                            },
                            {
                                "ForInside": "IO1-DI03",
                                "DataType": "InputOutput",
                                "Index": 3,
                                "ForOutside": null
                            },
                            {
                                "ForInside": "IO1-DI04",
                                "DataType": "InputOutput",
                                "Index": 4,
                                "ForOutside": null
                            },
                            {
                                "ForInside": "IO1-DI05",
                                "DataType": "InputOutput",
                                "Index": 5,
                                "ForOutside": null
                            },
                            {
                                "ForInside": "IO1-DI06",
                                "DataType": "InputOutput",
                                "Index": 6,
                                "ForOutside": null
                            }
                        ],
                        "DataType": "InputOutput",
                        "Index": 7,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO1-DO02",
                        "DataType": "InputOutput",
                        "Index": 8,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO1-DO03",
                        "DataType": "InputOutput",
                        "Index": 9,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO1-DO04",
                        "DataType": "InputOutput",
                        "Index": 10,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO1-DO05",
                        "DataType": "InputOutput",
                        "Index": 11,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO1-DO06",
                        "DataType": "InputOutput",
                        "Index": 12,
                        "ForOutside": null
                    },
                ]
            },
            {
                "ForInside": "IO2输入输出",
                "children": [
                    {
                        "ForInside": "IO2-DI01",
                        "DataType": "InputOutput",
                        "Index": 13,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO2-DO01",
                        "DataType": "InputOutput",
                        "Index": 19,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO2-DO02",
                        "DataType": "InputOutput",
                        "Index": 20,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO2-DO03",
                        "DataType": "InputOutput",
                        "Index": 21,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO2-DO04",
                        "DataType": "InputOutput",
                        "Index": 22,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO2-DO05",
                        "DataType": "InputOutput",
                        "Index": 23,
                        "ForOutside": null
                    },
                    {
                        "ForInside": "IO2-DO06",
                        "children": [
                            {
                                "ForInside": "IO2-DI02",
                                "DataType": "InputOutput",
                                "Index": 14,
                                "ForOutside": null
                            },
                            {
                                "ForInside": "IO2-DI03",
                                "DataType": "InputOutput",
                                "Index": 15,
                                "ForOutside": null
                            },
                            {
                                "ForInside": "IO2-DI04",
                                "DataType": "InputOutput",
                                "Index": 16,
                                "ForOutside": null
                            },
                            {
                                "ForInside": "IO2-DI05",
                                "DataType": "InputOutput",
                                "Index": 17,
                                "ForOutside": null
                            },
                            {
                                "ForInside": "IO2-DI06",
                                "DataType": "InputOutput",
                                "Index": 18,
                                "ForOutside": null
                            }
                        ],
                        "DataType": "InputOutput",
                        "Index": 24,
                        "ForOutside": null
                    },
                ]
            },
        ];

        const treegrid = mini.get("treegrid1");
        treegrid.setData(null);
        // treegrid.expandAll();
        function onNodeCheck(e) {
            alert(e.sender.getValue(true))
        }

        function onDrawNode(e) {
            if (e.sender.getLevel(e.node) >= 1) {
                e.showCheckBox = true;
            }
        }

        function showTree1() {
            treegrid.setData(treeData1);
        }

        function showTree2() {
            treegrid.setData([{ "ForInside": "test" }]);
        }

        function clear1() {
            treegrid.setData(null);
        }
    </script>
</body>

</html>